<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.min.css">
    <style>
        .wrap{
            margin: 20px;
        }
        .table1{
            text-align: center;
        }
        tbody tr td .fu{
            display: inline-block;
            width: 4%;
            height: 20%;
            border: 1px solid #ccc;  
            color: #ccc;
            font: 10px;
            border-radius: 2px;        
        }

    </style>
</head>

<body>
    <div class="table-responsive wrap">
        <table class="table table-bordered table-condensed table1">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="box">全选
                    </td>
                    <td>商品编号</td>
                    <td>商品名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
               
                
            </tbody>
    
        </table>
        <div class="sum">总计：￥0</div>
    </div>
    <script src="../lib/jquery/jquery-1.12.4.min.js"></script>
    <script src="data.js"></script>
    <script>
      var arr = [];    
       for(var i=0;i<data.length;i++){
           console.log(data[i].all); 
           arr.push(data[i].all); 
       }
       console.log(arr);
       arr = [].concat.apply([], arr);
       console.log(arr);
       for(var j=0;j<arr.length;j++){
           console.log(arr[j]);
           var str = `
                        <tr>   
                                <td>
                                    <input type="checkbox" name="checkboxBtn" class="checkboxBtn">
                                </td>
                                <td>${arr[j].id}</td>
                                <td>${arr[j].name}</td>
                                <td>${arr[j].price}元</td>
                                <td>
                                    <button class="glyphicon glyphicon-minus minus fu"></button>
                                    <input type="number" value='${arr[j].num}'>
                                    <button class="glyphicon glyphicon-plus plus fu"></button>
                                </td>
                                <td>${arr[j].price * arr[j].num}元</td>
                                <td><button class="delBtn">删除</button></td>                 
                        </tr>`;
           $('table tbody').append(str);
       }
      $('table').on('click','.minus',function(){
          console.log(this);
          console.log($(this).parent());
          console.log($(this).parent()[0].children[1].value);
          var value = $(this).parent()[0].children[1].value;
          if(value>=1){
            --value;
            $(this).parent()[0].children[1].value = value;
          }  
          console.log($(this).parent().parent());
          console.log($(this).parent().parent()[0].children[5].innerHTML);
          console.log($(this).parent().parent()[0].children[3].innerHTML);
          console.log(parseInt($(this).parent().parent()[0].children[3].innerHTML));
          $(this).parent().parent()[0].children[5].innerHTML = parseInt($(this).parent().parent()[0].children[3].innerHTML) * value + '元';
          
      })

      $('table').on('click','.plus',function(){
        var value = $(this).parent()[0].children[1].value;
          if(value>=1){
            ++value;
            $(this).parent()[0].children[1].value = value;
          } 
          $(this).parent().parent()[0].children[5].innerHTML = parseInt($(this).parent().parent()[0].children[3].innerHTML) * value + '元';

      })

      $('table').on('click','.delBtn',function(){
        var tr = $(this).parent().parent();
        tr.remove();
        
      })

      $('#box').click(function(){
          var checkboxArr = document.getElementsByName('checkboxBtn');
          var sum = document.getElementsByClassName('sum');
          console.log(sum);
          console.log(checkboxArr);
          if(this.checked){
            for(var i=0;i<checkboxArr.length;i++){
                checkboxArr[i].checked = true;
            } 
            console.log($('table tbody tr'));
            console.log($('table tbody tr').length);
            var number = 0;
            for(let j=0;j<$('table tbody tr').length;j++){    
                console.log(parseInt($('table tbody tr')[j].cells[5].innerHTML));
                number += parseInt($('table tbody tr')[j].cells[5].innerHTML);              

            }
            console.log('---'+number);

           sum[0].innerHTML = `总计：${number}元`;            

          }else{
            for(var i=0;i<checkboxArr.length;i++){
                checkboxArr[i].checked = false;
            } 
            sum[0].innerHTML = `总计：0元`; 
          }
      })
      
      var sum = document.getElementsByClassName('sum');     
     var checkedArr = [];
     var checkboxArr1 = [];
     
     $('table').on('click','.checkboxBtn',function(){
    
         if(this.checked){
             var number = 0;
             console.log($(this).parent().parent());
             console.log($(this).parent().parent()[0].cells[5].innerHTML);
             var valueNum = parseInt($(this).parent().parent()[0].cells[5].innerHTML);
             checkedArr.push(valueNum);
             console.log(checkedArr);
             for(var i=0;i<checkedArr.length;i++){
                number += checkedArr[i];
             }
             sessionStorage.setItem('add',JSON.stringify(number));
         }else{
            var number = sessionStorage.getItem('add');
             number = JSON.parse(number);
            var jianNumber = 0; 
            valueNum = parseInt($(this).parent().parent()[0].cells[5].innerHTML);
            console.log(valueNum);
            checkboxArr1.push(valueNum);  
            console.log(checkboxArr1);   
            for(var j=0;j<checkboxArr1.length;j++){
                jianNumber += checkboxArr1[j];
            }     
            console.log(jianNumber);
            number = number - jianNumber;

         }
         
         sum[0].innerHTML = `总计：${number}元`; 

     })
  
      



    </script>
   

</body>

</html>